<template>
  <div class="order-payment-container">
    <!-- 头部 -->
    <div class="header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <i class="icon-back">←</i>
        </button>
        <h4 class="page-title">确认订单</h4>
      </div>
    </div>

    <div class="payment-content">
      <!-- 配送方式选择 -->
      <div class="delivery-section">
        <h3 class="section-title">配送方式</h3>
        <div class="delivery-options">
          <div class="delivery-option" :class="{ active: deliveryType === 1 }" @click="selectDeliveryType(1)">
            <div class="option-content">
              <h4>快递配送</h4>
              <p>承诺48小时内发货</p>
            </div>
            <div class="option-radio">
              <span class="radio" :class="{ checked: deliveryType === 1 }"></span>
            </div>
          </div>

          <div class="delivery-option" :class="{ active: deliveryType === 2 }" @click="selectDeliveryType(2)">
            <div class="option-content">
              <h4>上门自提</h4>
              <p>到店即可取货</p>
            </div>
            <div class="option-radio">
              <span class="radio" :class="{ checked: deliveryType === 2 }"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 收货地址 (快递配送时显示) -->
      <div class="address-section" v-if="deliveryType === 1">
        <div class="section-header">
          <h3 class="section-title">收货地址</h3>
          <button class="add-address-btn" @click="showAddressModal = true">+ 选择地址</button>
        </div>

        <div class="address-list" v-if="defaultAddress.id && defaultAddress.id > 0">
          <div class="address-item active">
            <div class="address-content">
              <div class="address-header">
                <span class="recipient-name">{{ defaultAddress.realname }}</span>
                <span class="recipient-phone">{{ defaultAddress.mobile }}</span>
                <span class="default-tag" v-if="defaultAddress.is_default === 1">默认</span>
              </div>
              <div class="address-detail">
                {{ defaultAddress.province.name }} {{ defaultAddress.city.name }} {{ defaultAddress.town.name }} {{ defaultAddress.address }}
              </div>
            </div>
            <div class="address-radio">
              <span class="radio checked"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 门店选择 (上门自提时显示) -->
      <div class="store-section" v-if="deliveryType === 2">
        <h2 class="section-title">以下门店均可到店自提</h2>
        <div class="store-list">
          <div
            class="store-item"
            v-for="(store, index) in storeList"
            :key="index"
            :class="{ active: selectedStoreIndex === index }"
            @click="selectStore(index)">
            <div class="store-content">
              <div class="store-header">
                <h4 class="store-name">{{ store.store_name }}</h4>
                <span class="store-distance">{{ getDistance(store.distance) }}</span>
              </div>
              <div class="store-address">{{ store.pcas }} {{ store.address }}</div>
              <div class="store-info">
                <span class="store-phone">📞 {{ store.contact }}</span>
                <span class="store-hours">🕐 {{ store.businessHours }}</span>
              </div>
            </div>
            <div class="store-radio">
              <span class="radio" :class="{ checked: selectedStoreIndex === index }"></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品信息 -->
      <div class="product-section">
        <h3 class="section-title">商品信息</h3>
        <div class="product-list">
          <div class="product-item" v-for="(product, index) in orderProducts" :key="index">
            <div class="product-image">
              <img :src="proxy.$buildUrl(product.main_image)" :alt="product.spu_name" />
            </div>
            <div class="product-info">
              <h4 class="product-name">{{ product.spu_name }}</h4>
              <p class="product-spec">{{ product.sku_name }}</p>
              <div class="product-price-qty">
                <span class="product-price">¥{{ product.unit_price }}</span>
                <span class="product-qty">x{{ product.quantity }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 费用明细 -->
      <div class="cost-section">
        <h3 class="section-title">费用明细</h3>
        <div class="cost-list">
          <div class="cost-item">
            <span class="cost-label">商品总价</span>
            <span class="cost-value">¥{{ totalProductPrice }}</span>
          </div>
          <div class="cost-item" v-if="deliveryType === 1">
            <span class="cost-label">运费</span>
            <span class="cost-value">¥{{ shippingFee }}</span>
          </div>
          <div class="cost-item total">
            <span class="cost-label">实付款</span>
            <span class="cost-value">¥{{ totalAmount }}</span>
          </div>
        </div>
      </div>

      <!-- 买家备注 -->
      <div class="cost-section">
        <h3 class="section-title">买家备注</h3>
        <el-input v-model="buyer_words" type="textarea" :rows="3" placeholder="请输入您的备注信息" />
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="payment-footer">
      <div class="payment-info">
        <span class="total-label">合计：</span>
        <span class="total-amount">¥{{ totalAmount }}</span>
      </div>
      <button class="pay-btn" @click="handlePayment" :disabled="!canPay">立即支付</button>
    </div>

    <!-- 地址管理（抽屉） -->
    <el-drawer v-model="showAddressModal" title="地址管理" direction="rtl" size="60%" :before-close="handleClose">
      <addressPage @select-event="selectAddress" />
    </el-drawer>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, computed, onMounted, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import apiOrder from '@/api/modules/order'
  import apiGood from '@/api/modules/good'
  import apiUser from '@/api/modules/user'
  import { useUserStore } from '@/stores/user.js'
  import addressPage from '@/views/AddressSelect.vue'

  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  const { proxy } = getCurrentInstance()

  // 从store获取用户状态（保持响应性）
  const isLoggedIn = computed(() => userStore.isLoggedIn)
  const userInfo = computed(() => userStore.userInfo)

  // 基础数据
  const skuId = ref(route.query.skuId ? route.query.skuId : '')
  const quantity = ref(route.query.quantity ? Number(route.query.quantity) : 1)
  const deliveryType = ref(route.query.deliveryType ? Number(route.query.deliveryType) : 1) // 配送方式 1-'express' | 2-'pickup'
  const orderIds = ref(route.query.orderIds ? route.query.orderIds : '')
  const cartIds = ref(route.query.cartIds ? route.query.cartIds : '')
  const shop_id = ref('')
  const store_id = ref('')
  const goodAmount = ref(0)
  const shippingFee = ref(0) // 运费
  const freeDelivery = ref(false)
  const limitDelivery = ref(false)
  const totalWeight = ref(0)
  const totalVolume = ref(0)
  const totalQuantity = ref(0)
  const pay_order_id = ref('')
  const buyer_words = ref('')
  const orderProducts = ref([])
  const freightTemplates = ref([])
  const defaultAddress = ref({})

  // 初始化
  onMounted(() => {
    loadOrderData()
    userDefaultAddress()
  })

  const loadOrderData = () => {
    if (orderIds.value && orderIds.value !== '') {
      apiOrder
        .GetOrdersByIds({
          page: 1,
          limit: orderIds.value.split(',').length,
          ids: orderIds.value,
          status: 1, // 待付款
        })
        .then(async (res) => {
          const orders = res.data.orders
          let orderCoupon = 0
          orderProducts.value = []
          orders.forEach((item) => {
            orderProducts.value = orderProducts.value.concat(item.products)
            orderCoupon.value += parseFloat(item.shop_cost_amount)
          })
          shop_id.value = res.data.shop_id
          store_id.value = res.data.store_id
          goodAmount.value = 0
          totalWeight.value = 0
          totalVolume.value = 0
          totalQuantity.value = 0
          orderProducts.value.forEach((item) => {
            goodAmount.value += item.total_amount
            totalWeight.value += parseFloat(item.weight) * parseInt(item.quantity)
            totalVolume.value += parseFloat(item.volume) * parseInt(item.quantity)
            totalQuantity.value += parseInt(item.quantity)
          })
          defaultAddress.value = {
            id: orders[0].address_id,
            realname: orders[0].receiver_name,
            mobile: proxy.$decryptAES(orders[0].receiver_phone),
            province: tproxy.$parseJsonObject(orders[0].receiver_province),
            city: proxy.$parseJsonObject(orders[0].receiver_city),
            town: proxy.$parseJsonObject(orders[0].receiver_town),
            street: proxy.$parseJsonObject(orders[0].receiver_street),
            address: proxy.$decryptAES(orders[0].receiver_address),
          }
          freightTemplates.value = res.data.freight_template // 多个运费模板
        })
    } else if (cartIds.value && cartIds.value !== '') {
      apiOrder
        .GetShoppingCartByIds({
          page: 1,
          limit: cartIds.value.split(',').length,
          ids: cartIds.value,
        })
        .then(async (res) => {
          orderProducts.value = res.data.products
          goodAmount.value = 0
          totalWeight.value = 0
          totalVolume.value = 0
          totalQuantity.value = 0
          orderProducts.value.forEach((item) => {
            goodAmount.value += item.total_amount
            totalWeight.value += parseFloat(item.weight) * parseInt(item.quantity)
            totalVolume.value += parseFloat(item.volume) * parseInt(item.quantity)
            totalQuantity.value += parseInt(item.quantity)
            shop_id.value = item.shop_id
            store_id.value = item.store_id
          })
          freightTemplates.value = res.data.freight_template // 多个运费模板
        })
    } else if (skuId.value && Number(skuId.value) > 0) {
      apiGood.GetProductSkuInfo({ sku_id: skuId.value }).then(async (res) => {
        const unit_price = parseFloat(res.data.custom_price_cny)
        const actual_price = parseFloat(res.data.custom_price_cny) - parseFloat(res.data.coupon_amount)
        const skuData = {
          spu_id: res.data.spu_id,
          sku_id: res.data.id,
          shop_id: res.data.shop_id,
          store_id: res.data.store_id,
          platform_type: res.data.platform_type,
          spu_name: res.data.spu_name,
          sku_name: res.data.sku_name,
          package_sku: res.data.package_sku,
          main_image: res.data.white_back_ground_pic_url,
          quantity: quantity.value,
          unit_price: unit_price,
          actual_price: actual_price,
          total_amount: actual_price * quantity.value,
          stock_num: res.data.stock_num,
          available_stock: res.data.available_stock,
          locked_stock: res.data.locked_stock,
          sold_stock: res.data.sold_stock,
          weight: res.data.weight,
          volume: res.data.volume,
          coupon_id: res.data.coupon_id,
          coupon_amount: res.data.coupon_amount,
          warehouse_id: res.data.warehouse_id,
          warehouse_name: res.data.warehouse_name,
          warehouse_sku_id: res.data.warehouse_sku_id,
          warehouse_sku_name: res.data.warehouse_sku_name,
          baocai_id: res.data.baocai_id,
          baocai_name: res.data.baocai_name,
          baocai_cost: res.data.baocai_cost,
          cost_price: res.data.cost_price,
          purchase_price: res.data.purchase_price,
          weight: res.data.weight,
          volume: res.data.volume,
          l: res.data.l,
          w: res.data.w,
          h: res.data.h,
          reduce_type: res.data.reduce_type,
        }
        shop_id.value = skuData.shop_id
        store_id.value = skuData.store_id
        orderProducts.value = [skuData]
        goodAmount.value = skuData.total_amount
        totalWeight.value = parseFloat(skuData.weight) * quantity.value
        totalVolume.value = parseFloat(skuData.volume) * quantity.value
        totalQuantity.value = quantity.value
        freightTemplates.value = [res.data.freight_template] // 单个运费模板
      })
    }
  }

  const userDefaultAddress = () => {
    apiUser.GetDefaultAddress().then(async (res) => {
      defaultAddress.value = res.data
      defaultAddress.value.mobile = proxy.$decryptAES(defaultAddress.value.mobile)
      defaultAddress.value.address = proxy.$decryptAES(defaultAddress.value.address)
      defaultAddress.value.province = proxy.$parseJsonObject(defaultAddress.value.province)
      defaultAddress.value.city = proxy.$parseJsonObject(defaultAddress.value.city)
      defaultAddress.value.town = proxy.$parseJsonObject(defaultAddress.value.town)
      defaultAddress.value.street = proxy.$parseJsonObject(defaultAddress.value.street)
      loadUnlineStore()
    })
  }

  const loadUnlineStore = () => {
    const cityCode = defaultAddress.value.city.code
    const cityName = defaultAddress.value.city.name
    apiGood.GetUnlineStoreList({ page: 1, limit: 1000, cityCode: cityCode, cityName: cityName }).then(async (res) => {
      const today = new Date().getDay() + 1
      res.data.forEach((item) => {
        // 营业时间，Key:用数字表示周几，{1:"12:00-16:00",2:"12:00-16:00",5:"19:00-02:00",6:"12:00-16:00",7:"12:00-16:00"}
        const dayMap = proxy.$parseJsonObject(item.day_map)
        if (dayMap) {
          item.businessHours = dayMap[today]
        }
      })
      storeList.value = res.data
    })
  }

  const calculateFreight = () => {
    // 根据运费模板和收货地址计算运费
    if (!(defaultAddress.value && defaultAddress.value.id > 0)) {
      return
    }
    if (!(freightTemplates.value && freightTemplates.value.length > 0)) {
      return
    }
    shippingFee.value = 0
    const province = defaultAddress.value.province
    const city = defaultAddress.value.city
    const town = defaultAddress.value.town
    for (var i = 0; i < freightTemplates.value.length; i++) {
      // 计价方式：1-按重量 2-按件数 3-按体积
      const calculate_type = freightTemplates.value[i].calculate_type
      // 运费类型-0:阶梯计价 1:固定运费 2:卖家包邮 3:货到付款
      const freight_rule_type = freightTemplates.value[i].rule_type
      // 规则类型（1:默认运费；2:指定地区运费；3:指定条件包邮；4:指定限售地区）
      let ruleArray = freightTemplates.value[i].ruleArray
      ruleArray.forEach((item) => {
        item.rule_address = proxy.$parseJsonObject(item.rule_address)
        item.rule_address.forEach((pcs) => {
          const ii = item.rule_address.findIndex((o) => o.code !== pcs.code && o.code.startsWith(pcs.code))
          if (ii >= 0) {
            pcs.hasChildren = true
          } else {
            pcs.hasChildren = false
          }
        })
        const new_rule_address = item.rule_address.filter((pcs) => !pcs.hasChildren)
        item.rule_address = new_rule_address // 只保留末级节点
      })

      // step1. 限售地区 [{ "code": "32", "name": "江苏省" }]
      limitDelivery.value = false
      const limitArea = ruleArray.filter((item) => item.rule_type === 4)
      if (limitArea && limitArea.length > 0) {
        limitArea.forEach((item) => {
          const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
          const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
          const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
          if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
            limitDelivery.value = true
          }
        })
      }
      if (limitDelivery.value) {
        shippingFee.value = 0
        return
      }
      // step2. 卖家包邮 或 货到付款
      if (freight_rule_type >= 2) {
        freeDelivery.value = true
        shippingFee.value = 0
        return
      }
      // step3. 指定条件包邮
      freeDelivery.value = false
      const baoyouArea = ruleArray.filter((item) => item.rule_type === 3)
      if (baoyouArea && baoyouArea.length > 0) {
        baoyouArea.forEach((item) => {
          const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
          const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
          const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
          if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
            // 满xx包邮 计量单位（1-元 2-kg 3-cm³）
            if (item.over_danwei === 1 && goodAmount.value >= item.over_number) {
              freeDelivery.value = true
            } else if (item.over_danwei === 2 && totalWeight.value >= item.over_number) {
              freeDelivery.value = true
            } else if (item.over_danwei === 2 && totalVolume.value >= item.over_number) {
              freeDelivery.value = true
            }
          }
        })
      }
      if (freeDelivery.value) {
        shippingFee.value = 0
        return
      }
      // step4. 指定地区计算邮费（取最高）
      let isCharging = false
      let maxChargingFreight = 0
      const chargingArea = ruleArray.filter((item) => item.rule_type === 2)
      if (chargingArea && chargingArea.length > 0) {
        chargingArea.forEach((item) => {
          const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
          const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
          const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
          if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
            isCharging = true
            // 阶梯计费 或 固定运费 calculate_type 计价方式：1-按重量 2-按件数 3-按体积
            let basicValue = 0
            let thisChargingFreight = 0
            if (calculate_type === 1) {
              basicValue = totalWeight.value
            } else if (calculate_type === 2) {
              basicValue = totalQuantity.value
            } else {
              basicValue = totalVolume.value
            }
            if (freight_rule_type === 0) {
              thisChargingFreight = item.first_price
              basicValue -= parseFloat(item.first_unit)
              if (basicValue > 0 && parseFloat(item.add_unit) > 0) {
                // 向上取整
                thisChargingFreight += Math.ceil(basicValue / parseFloat(item.add_unit)) * parseFloat(item.add_price)
              }
            } else if (freight_rule_type === 1) {
              thisChargingFreight = item.fixed_amount
            }

            if (thisChargingFreight > maxChargingFreight) {
              maxChargingFreight = thisChargingFreight
            }
          }
        })
      }
      if (isCharging) {
        if (maxChargingFreight > shippingFee.value) {
          shippingFee.value = maxChargingFreight
        }
        continue
      }

      // step5. 默认运费规则（取最高）
      let maxDefaultFreight = 0
      const defaultArea = ruleArray.filter((item) => item.rule_type === 1)
      if (defaultArea && defaultArea.length > 0) {
        defaultArea.forEach((item) => {
          // 阶梯计费 或 固定运费 calculate_type 计价方式：1-按重量 2-按件数 3-按体积
          let basicValue = 0
          let thisDefaultFreight = 0
          if (calculate_type === 1) {
            basicValue = paymentInfo.totalWeight.value
          } else if (calculate_type === 2) {
            basicValue = paymentInfo.totalQuantity.value
          } else {
            basicValue = paymentInfo.totalVolume.value
          }
          if (freight_rule_type === 0) {
            thisDefaultFreight = item.first_price
            basicValue -= parseFloat(item.first_unit)
            if (basicValue > 0 && parseFloat(item.add_unit) > 0) {
              // 向上取整
              thisDefaultFreight += Math.ceil(basicValue / parseFloat(item.add_unit)) * parseFloat(item.add_price)
            }
          } else if (freight_rule_type === 1) {
            thisDefaultFreight = item.fixed_amount
          }

          if (thisDefaultFreight > maxDefaultFreight) {
            maxDefaultFreight = thisDefaultFreight
          }
        })
      }
      if (maxDefaultFreight > shippingFee.value) {
        shippingFee.value = maxDefaultFreight
      }
    }
  }

  // 地址相关
  const showAddressModal = ref(false)
  const handleClose = (done) => {
    done()
  }
  const selectAddress = (newAddress) => {
    defaultAddress.value = newAddress
    showAddressModal.value = false
  }

  // 门店相关
  const selectedStoreIndex = ref(0)
  const storeList = ref([])
  const getDistance = (distance) => {
    if (distance >= 1000) {
      return (distance / 1000).toFixed(0) + ' km'
    } else {
      return distance + '  m'
    }
  }

  // 费用计算
  const totalProductPrice = computed(() => {
    return orderProducts.value.reduce((total, product) => {
      return total + product.total_amount
    }, 0)
  })

  const shippingFeeFlag = computed(() => {
    const addrid = defaultAddress.value.id > 0 ? defaultAddress.value.id : 0
    return deliveryType.value + addrid + totalWeight.value + totalVolume.value + totalQuantity.value
  })

  const totalAmount = computed(() => {
    return totalProductPrice.value + shippingFee.value
  })

  watch(shippingFeeFlag, (newValue, oldValue) => {
    if (newValue !== oldValue) {
      if (deliveryType.value === 1 && Number(defaultAddress.value.id) > 0) {
        calculateFreight()
      }
    }
  })

  // 是否可以支付
  const canPay = computed(() => {
    if (deliveryType.value === 1) {
      return defaultAddress.value.id && defaultAddress.value.id > 0
    } else {
      return storeList.value.length > 0
    }
  })

  // 方法
  const goBack = () => {
    router.go(-1)
  }

  const selectDeliveryType = (type) => {
    deliveryType.value = type
  }

  const loading = ref(false)
  const handlePayment = () => {
    if (!canPay.value && deliveryType.value === 1) {
      ElMessage.warning('请选择配送方式和地址')
      return
    } else if (!canPay.value) {
      return
    }
    if (loading.value) {
      return
    }

    loading.value = true

    // 构建订单数据
    const orderData = {
      shop_id: shop_id.value,
      store_id: store_id.value,
      sku_id: skuId.value,
      quantity: quantity.value,
      cart_ids: cartIds.value,
      order_ids: orderIds.value,
      receive_type: deliveryType.value, // 收件方式：1-邮寄，2-自提
      addressInfo: deliveryType.value === 1 ? defaultAddress.value : '', // 收货地址
      pay_type: 1, // 支付方式（1-微信 2-支付宝 3-余额）
      buyer_words: buyer_words.value, // 买家留言
      // couponInfo: selectedCoupon.value, // 优惠券
      // paymentPassword: proxy.$encryptAES(paymentPassword.value), // 支付密码(加密)
      goodAmount: goodAmount.value, // 商品总额
      shippingFee: shippingFee.value, // 运费金额
      couponAmount: 0, // 优惠金额
      orderAmount: totalAmount.value, // 订单总额（含运费）
      finalAmount: totalAmount.value, // 实付金额
      totalWeight: totalWeight.value, // 总重量
      totalVolume: totalVolume.value, // 总体积
      totalQuantity: totalQuantity.value, // 总数量
      orderProducts: orderProducts.value, // 订单商品明细
    }

    apiOrder
      .AddOrders(orderData)
      .then(async (res) => {
        loading.value = false
        pay_order_id.value = res.data
        // 跳转到支付页面
        router.push({
          path: '/payment',
          query: { orderId: pay_order_id.value },
        })
      })
      .catch((err) => {
        loading.value = false
      })
  }
</script>

<style scoped>
  .order-payment-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 80px;
  }

  /* 头部样式 */
  .header {
    background-color: #1c705e;
    color: white;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-content {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .back-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    margin-right: 16px;
  }

  .page-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }

  /* 内容区域 */
  .payment-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* 通用区块样式 */
  .delivery-section,
  .address-section,
  .store-section,
  .product-section,
  .cost-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .add-address-btn {
    background: #1c705e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }

  /* 配送方式样式 */
  .delivery-options {
    display: flex;
    gap: 16px;
  }

  .delivery-option {
    flex: 1;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .delivery-option.active {
    border-color: #1c705e;
    background-color: #f0f8f5;
  }

  .option-icon {
    font-size: 24px;
  }

  .option-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
  }

  .option-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
  }

  .option-radio {
    margin-left: auto;
  }

  .radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
  }

  .radio.checked {
    border-color: #1c705e;
  }

  .radio.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #1c705e;
    border-radius: 50%;
  }

  /* 地址列表样式 */
  .address-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .address-item {
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .address-item.active {
    border-color: #1c705e;
    background-color: #f0f8f5;
  }

  .address-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .recipient-name {
    font-weight: 600;
    color: #333;
  }

  .recipient-phone {
    color: #666;
  }

  .default-tag {
    background-color: #1c705e;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  .address-detail {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
  }

  /* 门店列表样式 */
  .store-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .store-item {
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store-item.active {
    border-color: #1c705e;
    background-color: #f0f8f5;
  }

  .store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .store-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .store-distance {
    color: #1c705e;
    font-size: 14px;
    font-weight: 500;
  }

  .store-address {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .store-info {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;
  }

  /* 商品列表样式 */
  .product-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .product-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
  }

  .product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-info {
    flex: 1;
  }

  .product-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .product-spec {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
  }

  .product-price-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-price {
    font-size: 16px;
    font-weight: 600;
    color: #e53935;
  }

  .product-qty {
    font-size: 14px;
    color: #666;
  }

  /* 费用明细样式 */
  .cost-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }

  .cost-item.total {
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
  }

  .cost-label {
    color: #666;
  }

  .cost-value {
    color: #333;
    font-weight: 500;
  }

  .cost-item.total .cost-value {
    color: #e53935;
    font-size: 18px;
  }

  /* 底部支付按钮 */
  .payment-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
  }

  .payment-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .total-label {
    font-size: 16px;
    color: #666;
  }

  .total-amount {
    font-size: 20px;
    font-weight: 600;
    color: #e53935;
  }

  .pay-btn {
    background-color: #1c705e;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .pay-btn:hover {
    background-color: #155a4a;
  }

  .pay-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  /* 弹窗样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .address-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .modal-header h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
  }

  .modal-content {
    padding: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .form-group textarea {
    height: 80px;
    resize: vertical;
  }

  .region-selector {
    display: flex;
    gap: 8px;
  }

  .region-selector select {
    flex: 1;
  }

  .checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .checkbox-label input[type='checkbox'] {
    width: auto;
  }

  .modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid #e5e5e5;
  }

  .cancel-btn,
  .confirm-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
  }

  .cancel-btn {
    background-color: #f5f5f5;
    color: #666;
  }

  .confirm-btn {
    background-color: #1c705e;
    color: white;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .payment-content {
      padding: 16px;
    }

    .delivery-options {
      flex-direction: column;
    }

    .delivery-option {
      flex-direction: row;
    }

    .region-selector {
      flex-direction: column;
    }

    .store-info {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }

    .modal-footer {
      flex-direction: column;
    }
  }
</style>
